<template>
	<div>
		<mj-title type="h2" title="Card 卡片"></mj-title>
		<div class="page-desc">基础容器，用来显示文字、列表、图文等内容，也可以配合其它组件一起使用。</div>

		<mj-title type="h5" title="基础使用"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-card radius="5" shadow="hover">
					<div slot="title">标题</div>
					<div slot="extra"><a href="">Extra</a></div>
					<mj-list :data='data' border="false" size="small"></mj-list>
				</mj-card>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-card radius="5" shadow="hover">
							&lt;div slot="title">标题&lt;/div>
							&lt;div slot="extra">&lt;a href="">Extra&lt;/a>&lt;/div>
							&lt;mj-list :data='data' border="false" size="small">&lt;/mj-list>
						&lt;/mj-card>
					&lt;/template>
					&lt;script>
					export default {
						data () {
							return {
								data:[
									{title:"来是空言去绝踪，月斜楼上五更钟。"},
									{title:"梦为远别啼难唤，书被催成墨未浓。"},
									{title:"蜡照半笼金翡翠，麝熏微度绣芙蓉。"},
									{title:"刘郎已恨蓬山远，更隔蓬山一万重。"},
								]
							}
						},
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="简单使用"></mj-title>
		<div class="page-desc" style="margin-bottom:10px;">没有head，只保留body内容</div>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-card radius="5">
					<mj-list :data='data' border="false" size="small"></mj-list>
				</mj-card>

			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-card radius="5">
							&lt;mj-list :data='data' border="false" size="small">&lt;/mj-list>
						&lt;/mj-card>
					&lt;/template>
					&lt;script>
					export default {
						data () {
							return {
								data:[
									{title:"来是空言去绝踪，月斜楼上五更钟。"},
									{title:"梦为远别啼难唤，书被催成墨未浓。"},
									{title:"蜡照半笼金翡翠，麝熏微度绣芙蓉。"},
									{title:"刘郎已恨蓬山远，更隔蓬山一万重。"},
								]
							}
						},
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="卡片阴影"></mj-title>
		<div class="page-desc">添加<code>shadow="always"</code>让卡片有阴影效果</div>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-card radius="5" shadow="always">
					<div slot="title">标题</div>
					<mj-list :data='data' border="false" size="small"></mj-list>
				</mj-card>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-card radius="5" shadow="always">
							&lt;div slot="title">标题&lt;/div>
							&lt;div slot="extra">&lt;a href="">Extra&lt;/a>&lt;/div>
							&lt;mj-list :data='data' border="false" size="small">&lt;/mj-list>
						&lt;/mj-card>
					&lt;/template>
					&lt;script>
					export default {
						data () {
							return {
								data:[
									{title:"来是空言去绝踪，月斜楼上五更钟。"},
									{title:"梦为远别啼难唤，书被催成墨未浓。"},
									{title:"蜡照半笼金翡翠，麝熏微度绣芙蓉。"},
									{title:"刘郎已恨蓬山远，更隔蓬山一万重。"},
								]
							}
						},
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="无边框"></mj-title>
		<div class="page-desc">在某些场景下，移除边框线，显示效果更好</div>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<div class="p20" style="background: var(--darkgray)">
					<mj-card radius="5" shadow="hover" border="false">
						<div slot="title">标题</div>
						<mj-list :data='data' border="false" size="small"></mj-list>
					</mj-card>
				</div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-card radius="5" shadow="hover" border="false">
							&lt;div slot="title">标题&lt;/div>
							&lt;div slot="extra">&lt;a href="">Extra&lt;/a>&lt;/div>
							&lt;mj-list :data='data' border="false" size="small">&lt;/mj-list>
						&lt;/mj-card>
					&lt;/template>
					&lt;script>
					export default {
						data () {
							return {
								data:[
									{title:"来是空言去绝踪，月斜楼上五更钟。"},
									{title:"梦为远别啼难唤，书被催成墨未浓。"},
									{title:"蜡照半笼金翡翠，麝熏微度绣芙蓉。"},
									{title:"刘郎已恨蓬山远，更隔蓬山一万重。"},
								]
							}
						},
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Card 参数"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>radius</td>
					<td>card 圆角，单位px</td>
					<td>Number</td>
					<td>-</td>
				</tr>
				<tr>
					<td>border</td>
					<td>card 描边，可选择关闭<code>border="false"</code></td>
					<td>Boolean</td>
					<td>true</td>
				</tr>
				<tr>
					<td>shadow</td>
					<td>card 阴影，<code>shadow="always"</code>，可选值：<code>always</code> / <code>hover</code></td>
					<td>String</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>
		<mj-title type="h6" title="Card Slot插槽"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>名称</th>
					<th>说明</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>title</td>
					<td>标题-扩展插槽</td>
				</tr>
				<tr>
					<td>extra</td>
					<td>扩展插槽</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
export default {
	data () {
		return {
			data:[
				{title:"来是空言去绝踪，月斜楼上五更钟。"},
				{title:"梦为远别啼难唤，书被催成墨未浓。"},
				{title:"蜡照半笼金翡翠，麝熏微度绣芙蓉。"},
				{title:"刘郎已恨蓬山远，更隔蓬山一万重。"},
			]
		}
	},
}
</script>

<style scoped="">
.mj-card {width:480px;}
</style>